import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.less']
})
export class CounterComponent implements OnInit, AfterViewInit, OnDestroy {
  updateIntervalId: number | null = null;
  percent: number = 0

  hue: number = 0
  saturation: number = 0
  lightness: number = 0
  constructor() { }

  ngAfterViewInit() {
    this.updateIntervalId = window.setInterval(() => { this.updateProgressBar() }, 1000)
  }

  ngOnInit(): void {
  }

  ngOnDestroy(): void {
    if (this.updateIntervalId !== null) {
      clearInterval(this.updateIntervalId);
    }
  }

  updateProgressBar() {
    const now = new Date();
    const startOfYear = new Date(now.getFullYear(), 0, 1);
    const endOfYear = new Date(now.getFullYear() + 1, 0, 1);

    // 计算今年已经过去的天数
    const daysPassed = now.getTime() - startOfYear.getTime();
    // 计算全年的总天数
    const totalDays = endOfYear.getTime() - startOfYear.getTime();
    // 计算进度百分比
    this.percent = (daysPassed / totalDays) * 100;

    // 根据进度调整颜色
    const greenHue = 120; // 绿色的色相
    const redHue = 0;    // 红色的色相
    this.hue = Math.round(greenHue + (redHue - greenHue) * (this.percent / 100));
    this.saturation = 50; // 饱和度降低到50%
    this.lightness = 50;  // 亮度设置为中等

    //网页背景颜色调整为比进度条更淡一点的颜色
    // document.body.style.backgroundColor = `hsl(${this.hue}, ${this.saturation}%, ${this.lightness + 30}%)`;
  }
}